<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->
		<title>张帅锋个人简历</title>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css" />
	</head>
	<body>
		
		<header>
			<ul>
				<li>
					<img src="images/logome.jpg" />
					<div>
						<p>张帅锋</p>
						<p>个人简历</p>
					</div>
				</li>
				<li><a href="###">首页</a></li>
				<li><a href="###">关于我</a></li>
				<li><a href="###">专业技能</a></li>
				<li><a href="###">我的经历</a></li>
				<li><a href="###">我的项目</a></li>
				<li><a href="###">联系我</a></li>
			</ul>
		</header>
		
		<!--resume最外层滚动切换结构-->
		
		<div id="resume_box">
			<div class="box">
				<div class="personal-container">
            		<div class="personal-pic">
            			<div>
            				<img src="images/logome.jpg" />
            			</div>
            			<p>生活是一种绵延不绝的渴望,渴望不断进步,变得更睿智而优雅。</p>
            			<div class="line"></div>
            		</div>
            		<div class="personal-msg">
            			<p>我叫<b>张帅锋</b></p>
            			<p>24岁</p>
            			<p>前端研发工程师</p>
            			<p>zsfyn1@163.com</p>
            		</div>
            	</div>
			</div>
			<div class="box">
				<div class="personal-container">
            		<div class="personal-aboutme">
            			<h2>关于我</h2>
            			<div class="red-line"></div>
            			<p>&middot;ABOUT ME&middot;</p>
            		</div>
            		<ul class="personal-list">
            			<li>
            				<div class="icon">
            					<i class="iconfont icon-xuelirenzheng"></i>
            				</div>
            				<div class="personal-message">
            					<p>学历</p>
            					<p>本科</p>
            				</div>
            			</li>
            			<li>
            				<div class="icon">
            					<i class="iconfont icon-nianling"></i>
            				</div>
            				<div class="personal-message">
            					<p>年龄</p>
            					<p>24岁</p>
            				</div>
            			</li>
            			<li>
            				<div class="icon">
            					<i class="iconfont icon-xiazai20"></i>
            				</div>
            				<div class="personal-message">
            					<p>籍贯</p>
            					<p>洛阳</p>
            				</div>
            			</li>
            			<li>
            				<div class="icon">
            					<i class="iconfont icon-zhuangtai"></i>
            				</div>
            				<div class="personal-message">
            					<p>状态</p>
            					<p>不在职</p>
            				</div>
            			</li>
            		</ul>
            		<div class="personal-introduce">
            			<p>2015年毕业于郑州轻工业学院</p>
						<p>	喜欢用代码写出心仪的结构</p>
						<p>	AngularJS ReactJs Mui Bootsrap</p>
						<p>	层出不穷的框架让人兴奋，而不同框架背后的思路却在逐渐统一</p>
						<span class="left"></span>
						<span class="right"></span>
            		</div>
            	</div>
			</div>
			<div class="box">
				<div class="personal-container">
            		<div class="skill-title personal-aboutme">
            			<h2>专业技能</h2>
            			<div class="red-line"></div>
            			<p>&middot;SKILL&middot;</p>
            		</div>
            		<p class="personal-understand">前端的学习需要持之以恒，知识深度与广度都很重要。而前端开发的重中之重就是原生javascript的理解，而如今的思路必需有模块化，组件化，工程化</p>
            		<ul class="personal-module">
            			<li>
            				<img src="images/ng.png" />
            				<p>angular.js</p>
            				<img src="images/skill_flag.png" />
            				<div class="module-introduce" style="display: block;">
            					<ul>
            						<li>熟练运用angularJS处理移动端的模块开发</li>
            						<li>模块组件化</li>
            						<li>了解双绑的背后实现</li>
            						<li>熟练的指令编写</li>
            					</ul>
            				</div>
            			</li>
            			<li>
            				<img src="images/html.png" />
            				<p>html</p>
            				<img src="images/skill_flag.png" />
            				
            				<div class="module-introduce">
            					<ul>
									<li>深刻理解Web标准</li>
									<li>熟练运用html标签</li>
									<li>熟悉xml及xhtml标记语言</li>
									<li>掌握html5如SVG，localstorage新特性</li>
								</ul>
            				</div>
            			</li>
            			<li>
            				<img src="images/css.png" />
            				<p>css</p>
            				<img src="images/skill_flag.png" />
            				<div class="module-introduce">
            					<ul>
									<li>熟练运用css及css3新属性</li>
									<li>注重浏览器兼容性，熟悉常见的css hack（兼容至IE8）</li>
									<li>掌握bootstrap框架及源码的实现</li>
									<li>掌握css预编译器Less及Sass</li>
								</ul>
            				</div>
            			</li>
            			<li>
            				<img src="images/js.png" />
            				<p>javascript</p>
            				<img src="images/skill_flag.png" />
            				<div class="module-introduce">
            					<ul>
									<li>掌握jQuery</li>
									<li>掌握原生JS的编程</li>
									<li>注重JavaScript性能优化</li>
									<li>正在学习ES6</li>
								</ul>
            				</div>
            			</li>
            		</ul>
            	</div>
			</div>
			<div class="box">
				<div class="personal-container">
            		<div class="personal-aboutme">
            			<h2>我的经历</h2>
            			<div class="red-line"></div>
            			<p>&middot;EXPERIENCE&middot;</p>
            		</div>
            		<div class="preface">2014年，开始了web前端自学生涯。</div>
            		
            		<!--引入swiper结构-->
            		
            		<div class="swiper-container">
					    <div class="swiper-wrapper">
					        <div class="swiper-slide">
					        	<h2>北京信分宝科技有限公司</h2>
					        	<p>2016.3`到现在</p>
					        	<ul>
					        		<li>前端技术部</li>
					        		<li>负责快速构建高质量web页面</li>
					        		<li>用less预编译css，gulp进行自动化构建</li>
					        		<li>使用原生JS进行前端开发</li>
					        		<li>使用svn进行版本控制</li>
					        	</ul>
					        </div>
							<div class="swiper-slide">
					        	<h2>北京初趣科技有限公司</h2>
					        	<p>2015.2`2016.3</p>
					        	<ul>
					        		<li>前端技术部</li>
					        		<li>负责快速构建高质量移动app页面</li>
					        		<li>用less预编译css，gulp进行自动化构建</li>
					        		<li>使用原生JS+angularJS进行前端开发</li>
					        		<li>使用svn进行版本控制，Phonegap/Cordova进行app打包</li>
					        	</ul>
					        </div>
					    </div>
					    <!-- 如果需要分页器 -->
					    <div class="swiper-pagination"></div>
					    
					    <!-- 如果需要导航按钮 -->
					    <div class="swiper-button-prev"></div>
					    <div class="swiper-button-next"></div>
					</div>
            	</div>
			</div>
			<div class="box">
				<div class="personal-container">
            		<div class="personal-aboutme">
            			<h2>我的项目</h2>
            			<div class="red-line"></div>
            			<p>&middot;EXPERIENCE&middot;</p>
            		</div>
            		<ul class="program-pic">
            			<li>
            				<a href="http://test.mobile.chuqulvxing.com/order/productdetail?productId=27&type=1"><img src="images/bg13.jpg"></a>
            				<p>口袋地陪（移动端）</p>
            			</li>
            			<li>
            				<a href="http://mobile.chuqulvxing.com/home/about"><img src="images/bga.jpg"></a>
            				<p>口袋地陪（移动端）</p>
            			</li>
            			<li>
            				<a href="http://www.heilanhome.cn"><img src="images/bga1.jpg"></a>
            				<p>海澜之家（PC端）</p>
            			</li>
            			<li>
            				<a href="https://www.xinfenbao.com"><img src="images/bga5.jpg"></a>
            				<p>信分宝（PC端）</p>
            			</li>
            		</ul>
            		<p class="more"></p>
            	</div>
			</div>
			<div class="box">
				<div class="personal-container">
            		<div class="personal-aboutme">
            			<h2>联系我</h2>
            			<div class="red-line"></div>
            			<p>&middot;CONTACT ME&middot;</p>
            		</div>
            		<div class="resume">
            			<p>务实、认真是我对待事物的态度</p>
            			<p>喜欢是我研究代码的动力</p>
            			<p>如果您对我还算满意，请点击下面contact me</p>
            		</div>
            		<div class="contact-me">
            			<p class="contact">contact me</p>
            			<!--<p>QQ：<a>1226976344</a></p>
            			<p>TELE：<a>18392097105</a></p>
            			<p>E-mail：<a>zsfyn1@163.com</a></p>-->
            		</div>
            	</div>
			</div>
		</div>
		
          <!--
          	引入js文件
          -->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/personal.js"></script>
	</body>
</html>